<template>
  <div class="page-main" id="index">
    <el-container>
      <el-aside width="240px" style="background: #1F2E54">
        <div class="logo flex center alcenter cur_p" @click="goDashboard()">
          <h1 class="logo_txt">铁建投城发管理系统</h1>
          <!-- <img class="brand-img" src="../../public/images/icon/16.png" width="150" height="70" alt /> -->
        </div>
        <el-menu :default-active="meauActive" class="el-menu-vertical-demo" :unique-opened="true">
          <blockquote v-for="(item, k) in menus" :key="item.menu_id">
            <div v-if="item.child.length">
              <el-submenu :index="'' + (k + 1) + ''">
                <template slot="title">
                  <i :class="'' + item.icon + ''"></i>
                  <span slot="title">{{ item.name }}</span>
                </template>
                <!-- <el-menu-item-group> -->
                <el-menu-item :index="'' + (k + 1) + '-' + (j + 1) + ''" style="padding-left: 29px; background: #0f1112"
                  v-for="(v, j) in item.child" :key="v.menu_id"
                  @click="toPth(v.url, '' + (k + 1) + '-' + (j + 1) + '')">{{
                  v.name
                  }}</el-menu-item>
                <!-- </el-menu-item-group> -->
              </el-submenu>
            </div>
            <div v-else>
              <el-menu-item :index="'' + (k + 1) + ''" @click="toPth(item.url, '' + (k + 1) + '')">
                <i :class="'' + item.icon + ''"></i>
                <span slot="title">{{ item.name }}</span>
              </el-menu-item>
            </div>
          </blockquote>
        </el-menu>
      </el-aside>
      <el-main>
        <!--头部-->
        <el-col class="main_haed">
          <el-radio-group v-model="isCollapse">
            <el-radio-button :label="false">
              <img src="../../public/images/open.png" class="open_retract" />
            </el-radio-button>
            <el-radio-button :label="true">
              <img src="../../public/images/retract.png" class="open_retract" />
            </el-radio-button>
          </el-radio-group>
          <el-dropdown trigger="hover">
            <span class="el-dropdown-link userinfo-inner">
              <!--<img src="../../static/img/index/header.png" class="hader"/>-->
              {{ userTitle }}
              <i class="el-icon-caret-bottom"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-button type="text" @click="editpwd">修改密码</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <span @click="logout">退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
        <section class="content-container">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-if="oneMenuName">
              {{
              oneMenuName
              }}
            </el-breadcrumb-item>
            <el-breadcrumb-item v-if="twoMenuName">
              {{
              twoMenuName
              }}
            </el-breadcrumb-item>
            <el-breadcrumb-item v-if="threeMenuName">
              {{
              threeMenuName
              }}
            </el-breadcrumb-item>
          </el-breadcrumb>
          <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </section>
      </el-main>
    </el-container>
  </div>
</template>


<script>
//import { menus } from "../router/menus";

export default {
  data() {
    return {
      meauActive: "1-1",
      isCollapse: false,
      oneMenuName: "",
      twoMenuName: "",
      threeMenuName: "",
      menus: [],
      userInfo: [],
      userTitle: "",
    };
  },
  mounted: function () {
    this.meauActive = sessionStorage.getItem("meauActive");
    console.log(this.menus);
    this.getYtkMenus();
    this.getUserInfo();
  },
  methods: {
    logout() {
      this.$confirm("此操作将登出后台, 是否继续?", "温馨提示", {
        confirmButtonText: "登出",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          sessionStorage.removeItem("access-token");
          this.$message({
            type: "success",
            message: "退出成功!",
          });
          this.$router.push("/Login");
        })
        .catch(() => { });
    },
    /**
     * 获取列表
     */
    getUserInfo() {
      let that = this;
      that.axios.post("/userInfo").then((res) => {
        if (res) {
          that.userInfo = res.data;
          that.userTitle = res.data.username;
        }
      });
    },

    getYtkMenus() {
      let that = this;
      that.axios.post("/getYtkMenus").then((res) => {
        if (res) {
          that.menus = res.data.menus;
        }
      });
    },

    goDashboard() {
      this.$router.push("/dashboard/index");
    },

    editpwd() {
      this.$router.push("/config/password");
    },

    toPth(path, active) {
      sessionStorage.setItem("meauActive", active);
      this.$router.push(path);
    },
  },
};
</script>
<style>
.el-menu {
  border: none;
}

*::-webkit-scrollbar {
  display: none;
}

.logo_txt {
  color: rgb(255, 255, 255);
  font-size: 18px;
  height: 60px;
  width: 180px;
  line-height: 60px;
}

@import "../../public/css/index.css";
</style>